﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="CSLive.ControlPanel.Editor.Editor" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CS Live - Editor</title>
    <CSControl:Style id="UserStyles" runat="server" />
    <CSControl:Style runat="server" Href="../../style/controlpanel.css" />
    <CSControl:Script id="Script2" runat="server" Src="../../../utility/global.js" />
    <style type="text/css">
        .CommonTitleBarTitleAreaContainerLeft { background-image: url(../../images/cslive/cslivelogo.png); }
        #editorpage { height: 530px; overflow: auto; margin-left: 200px; }
        #editorpage ol { margin: 0; line-height: normal; font-family: Lucida Console; font-size: 10pt; }
        #editorpage ol li { line-height: normal; border: solid 1px white; cursor: default; margin: 0; padding: 0 2px; white-space: nowrap; }
        #editor { height: 530px; padding: 0; }
        #editorsidebar { border-right: solid 1px gray; cursor: default; float: left; overflow: hidden; height: 530px; width: 200px; }
        #editorsidebar div#pages, #editorsidebar div#cslivec { height: 498px; overflow: auto; }
        .CommonSubTitle { margin: 0; }
        .pagenode a { display: block; }
        .pagenode a:hover { background: #eee; text-decoration: none; }
        .parent a { cursor: default; background: white; }
        .parent a:hover { background: transparent; }
        .selected a, .selected a:hover { background: gray; color: white; }
        
        #cslivec ul { list-style-type: none; margin: 0; padding: 0; }
        #cslivec ul li span { float: left; cursor: pointer; width: 20px; text-align: center; padding-top: 2px; }
        #cslivec ul li div { border-bottom: solid 1px #ccc; cursor: default; border-top: solid 1px #ccc; background: #eee; padding: 2px 0; }
        #cslivec ul li ul li { margin-left: 5px; }
        #cslivec ul li ul li div { background: #fff; border-left: solid 1px #ccc; border-top: 0; }
        #cslivec ul li ul li ul li { margin: 1px; padding: 0; }
        #cslivec ul li ul li ul li span, #cslivec ul li ul li ul li i { display: none; float: none; }
        #cslivec ul li ul li ul li div { padding: 1px; cursor: pointer; padding-left: 27px; border: solid 1px white; }
        #cslivec ul li ul li ul li div.selected { border: solid 1px gray; background: gray; color: White; }
        #cslivec ul li ul li ul li div:hover { border-color: #ccc; }
        
        .newline { background: yellow; cursor: pointer!important; }
        .tab { cursor: e-resize!important; }
        
        .default { white-space:nowrap}
        .html { color:Black }

        .htmlComment { color:Green }
        .htmlTag { color:Black }
        .htmlStartTag, .htmlEndTag { color:Blue }
        .htmlOpenTagName,.htmlCloseTagName,.htmlStyleAttribList { color:Maroon }
        .cssAttribName,.htmlAttribName { color:Red }
        .cssAttribList { color:Black }
        .cssAttribValue,.htmlAttribValue,.htmlAttribEq { color:Blue }
        .htmlValueDelim { color:Blue }
        .css { color:Maroon }

        .js { color:Black }
        .jsComment { color:Green }
        .jsKeyword { color:Blue }
        .jsLiteral { color:Maroon }

        .hilite1,.jsHilite1,.cssHilite1 { background-color:#C0C0FF; }
        .hilite2,.jsHilite2,.cssHilite2 { background-color:#C0FFC0; }
        .hilite3,.jsHilite3,.cssHilite3 { background-color:#FFC0C0; }
        .hilite4,.jsHilite4,.cssHilite4 { background-color:#FFFF60; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
			<div id="CommonOuter"><div id="Common">
				<div class="CommonTitleBar">
				    <div class="CommonTitleBarTitleAreaContainerLeft">
                        <h1 class="CommonTitleBarTitle"><a href="http://communityserverlive.com" onclick="window.open(this.href); return false;">CS Live</a></h1>
                        <div class="CommonApplicationBar">The CS Live Control Editor <asp:label runat="server" ID="edit1" /></div>
                    </div>
                    <div style="clear: both;"></div>
				</div>
                <div class="CommonPanelNavigation" style="padding: 4px 10px;">
                    Welcome to the Editor, choose the page to edit and the control to add from the left, then click where you want it to go.  When your done with the page, click Save.
                </div>
                <div class="CommonContentArea" id="editor">
                    <div id="editorsidebar">
                    <asp:PlaceHolder runat="server" ID="edit2" Visible="false">
                        <h4 class="CommonSubTitle">CS Live Controls</h4>
                        <div id="cslivec">
                            <script type="text/javascript">
                                /*CSLive Editor © 2008 Nick Brown (nb development [http://www.nbdev.co.uk])*/
                                
                                //Toggle Collapsable Menus
                                function toggle(o)
                                {
                                    if (o.parentNode.getElementsByTagName('ul')[0].style.display != 'none')
                                    {
                                        o.innerHTML = '+';
                                        o.parentNode.getElementsByTagName('ul')[0].style.display = 'none';
                                    }
                                    else 
                                    {
                                        o.innerHTML = '-';
                                        o.parentNode.getElementsByTagName('ul')[0].style.display = '';
                                    }
                                }
                                
                                //line constructor
                                function line(linenumber, template, spacing)
                                {
                                    this.LineNumber = linenumber;
                                    this.Template = template;
                                    this.Spacing = spacing;
                                }
                                //line array
                                var lines = { };
                                                                
                                var selected = null;
                                var x = 0;

                                function select(o)
                                {
                                    if (selected == null) selected = o.parentNode;
                                    else 
                                    {
                                        selected.getElementsByTagName('div')[0].className = '';
                                        if (selected == o.parentNode) {
                                            selected = null;
                                            if (document.getElementById('newline' + x) != null)
                                                document.getElementById('lines').removeChild(document.getElementById('newline' + x));
                                        }
                                        else selected = o.parentNode;
                                    }
                                    if (selected != null)
                                    {
                                        selected.getElementsByTagName('div')[0].className = 'selected';
                                        if (document.getElementById('newline' + x) != null)
                                            document.getElementById('lines').removeChild(document.getElementById('newline' + x));
                                        var newline = document.createElement('li');
                                        newline.setAttribute('id', 'newline' + x);
                                        newline.setAttribute('class', 'newline');
                                        newline.onclick = function() { done(this); };
                                        newline.innerHTML = selected.getElementsByTagName('span')[0].innerHTML;
                                        document.getElementById('lines').appendChild(newline);
                                    }
                                }
                                function move(o)
                                {
                                    if (selected != null)
                                    {
                                        if (document.getElementById('newline' + x) != null)
                                            document.getElementById('lines').removeChild(document.getElementById('newline' + x));
                                        var newline = document.createElement('li');
                                        newline.setAttribute('id', 'newline' + x);
                                        newline.setAttribute('class', 'newline');
                                        newline.innerHTML = selected.getElementsByTagName('span')[0].innerHTML;
                                        newline.onclick = function() { done(this); };
                                        document.getElementById('lines').insertBefore(newline, o.nextSibling);   
                                    }
                                }
                                function done(o)
                                {
                                    if (selected != null) {
                                        document.getElementById('newline' + x).onclick = '';
                                        document.getElementById('newline' + x).className = 'newline tab';
                                        document.getElementById('newline' + x).onmousedown = newlineindentdown;
                                        document.getElementById('newline' + x).onmousemove = newlineindentmove;
                                        document.getElementById('newline' + x).onmouseup = newlineindentup;
                                        var ln = document.getElementById('newline' + x).previousSibling.getAttribute('id').replace('line', '');
                                        lines[parseInt(x + '')] = new line(parseInt(ln) + 1, selected.getElementsByTagName('i')[0].innerHTML.replace('<!--', '').replace('-->', ''), 0);
                                        x++;
                                        selected.getElementsByTagName('div')[0].className = '';
                                        selected = null;
                                    }
                                }
                                
                                //Tabbing Events
                                var down = null;
                                var z = 0;
                                function newlineindentdown(e)
                                {
                                    var targ;
                                    if (!e) e = window.event;
                                    if (e.target) targ = e.target;
                                    else if (e.srcElement) targ = e.srcElement;
                                    if (targ.nodeType == 3) targ = targ.parentNode;
                                    if (targ.tagName != "LI")
                                        targ = targ.parentNode;
                                    down = targ;
                                    z = mouseCoords(e).x;
                                    return false;
                                }                                
                                function newlineindentup(e) { down = null; z = 0; }
                                function newlineindentmove(e)
                                {
                                    if (down != null) {
                                        var i = mouseCoords(e).x;
                                        if (i < (z - 10))
                                        {
                                            if (down.getElementsByTagName('span')[0].innerHTML == "&nbsp;")
                                            {
                                                down.removeChild(down.getElementsByTagName('span')[0]);
                                                var l = parseInt(down.getAttribute('id').replace('newline', ''));
                                                lines[l].Spacing--;
                                                z = parseInt(i + '', 0); 
                                            }
                                            else
                                            {
                                                z = 0; down = null;
                                            }
                                        }
                                        else if (i > (z + 10))
                                        {
                                            var span = document.createElement('span');
                                            var l = parseInt(down.getAttribute('id').replace('newline', ''));
                                            lines[l].Spacing++;
                                            span.className = "html";
                                            span.innerHTML = "&nbsp;";
                                            down.insertBefore(span, down.getElementsByTagName('span')[0]);
                                            z = parseInt(i + '', 0);
                                        }
                                    }
                                    return false;
                                }
                                function mouseCoords(ev) {
	                                if(ev.pageX || ev.pageY) return {x:ev.pageX, y:ev.pageY};
	                                return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop  - document.body.clientTop };
	                            }
	                            
	                            //Set Hidden Field
                                function setfield()
                                {
                                    if (x == 0 && Remove.length == 0)
                                    {
                                        alert("You have not made any changes.\nAborting the Save Process");
                                        return false;
                                    }
                                    if (confirm("Saving will overwrite the current page, knowing this:\n\nAre you sure you want to save this page?") == true) {
                                        var s = "<lines>\n";
                                        for (var i = 0; i < x; i++)
                                            s += '   <add number="' + lines[i].LineNumber + '" spacing="' + lines[i].Spacing + '"><![CDATA[' + lines[i].Template + ']]></add>\n';
                                        for (var i = 0; i < Remove.length; i++)
                                            s += '   <remove number="' + Remove[i] + '" />\n';
                                        s += "</lines>\n";
                                        document.getElementById('<%=editorchanged.ClientID %>').value = s;
                                        return true;
                                    } return false;
                                }
                                var Remove = new Array();
                                function remove(o)
                                {
                                    var i = parseInt(o.getAttribute('id').replace('line', ''));
                                    for (var n = 0; n < Remove.length; n++)
                                        if (Remove[n] == i)
                                        {
                                            var rem2 = new Array();
                                            for (var r = 0; r < Remove.length; r++)
                                                if (r != n) rem2.push(Remove[r]);
                                            Remove = rem2;
                                            o.style.textDecoration = '';
                                            return;
                                        }
                                    Remove.push(i);
                                    o.style.textDecoration = 'line-through';
                                    return;
                                    
                                }
                            </script>
                            <asp:HiddenField runat="server" ID="editorchanged" />
                            <asp:Repeater runat="server" ID="livecontrols">
                                <HeaderTemplate>
                                    <ul>
                                </HeaderTemplate>
                                <ItemTemplate>
                                        <li id="Group<%#Container.DataItem.ToString().Replace(' ', '_') %>">
                                            <span onclick="toggle(this)">-</span>
                                            <div><%#Container.DataItem %></div>
                                            <asp:Repeater ID="controlrepeater" runat="server">
                                                <HeaderTemplate>
                                                    <ul>
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                        <li id="Control<%#Eval("Name").ToString().Replace(' ', '_') %>">
                                                            <span onclick="toggle(this)">-</span>
                                                            <div><a href="<%#Eval("DocsUri") %>" onclick="window.open(this.href); return false;"><%#Eval("Name") %></a></div>
                                                            <asp:Repeater ID="templaterepeater" runat="server">
                                                                <HeaderTemplate>
                                                                    <ul>
                                                                </HeaderTemplate>
                                                                <ItemTemplate>
                                                                        <li id="Control<%#Eval("Name").ToString().Replace(' ', '_') %>"><div title="<%#Eval("Description") %>" onclick="select(this)"><%#Eval("Name") %></div><span><%#colorize(Eval("Template"))%></span><i><!--<%#Eval("Template") %>--></i></li>
                                                                </ItemTemplate>
                                                                <FooterTemplate>
                                                                    </ul>
                                                                </FooterTemplate>
                                                            </asp:Repeater>
                                                        </li>
                                                </ItemTemplate>
                                                <FooterTemplate>
                                                    </ul>
                                                </FooterTemplate>
                                            </asp:Repeater>
                                        </li>
                                </ItemTemplate>
                                <FooterTemplate>
                                    </ul>
                                </FooterTemplate>
                            </asp:Repeater>
                        </div>
                        </asp:PlaceHolder>
                    <asp:PlaceHolder runat="server" ID="p1">
                        <h4 class="CommonSubTitle">Theme Pages</h4>
                        <div id="pages">
                            
                            <asp:TreeView ID="themepages" runat="server" ImageSet="Arrows" Width="100%" NodeWrap="True">
                                <ParentNodeStyle CssClass="parent" />
                                <RootNodeStyle CssClass="parent" />
                                <NodeStyle CssClass="pagenode" Width="100%" />
                                <SelectedNodeStyle CssClass="selected" />
                            </asp:TreeView>
                            
                        </div>
                    </asp:PlaceHolder>
                    </div>
	                <div id="editorpage">
	                    <asp:PlaceHolder runat="server" ID="lines" Visible="false">
                            <asp:HiddenField ID="selectedfile" runat="server" />
	                        <div style="background: #ddd;">&nbsp;Line#&nbsp;&nbsp;Line Contents</div>
                            <asp:Repeater runat="server" ID="linerepeater">
                                <HeaderTemplate>
                                    <ol id="lines">
                                </HeaderTemplate>
                                <ItemTemplate>
                                        <li id="line<%#Container.ItemIndex + 1 %>" ondblclick="remove(this);" onmouseover="move(this);"><%#Container.DataItem %>&nbsp;</li>
                                </ItemTemplate>
                                <FooterTemplate>
                                    </ol>
                                </FooterTemplate>
                            </asp:Repeater>
                            <script type="text/javascript">
                                function closeEditor()
                                {
                                    if (x > 0 || Remove.length > 0) {
                                        if (confirm("By closing the editor you loose any changes you have made to the page.\nAre you sure you want to close the editor?") == true) window.close();
                                    } else window.close();
                                    return false;
                                }
                            </script>
                        </asp:PlaceHolder>
                        <asp:PlaceHolder runat="server" ID="wait">
	                        <div style="padding: 10px; font-weight: bold;">Please select a page from the theme pages tree</div>
	                        <script type="text/javascript">
                                function closeEditor()
                                {
                                    window.close(); 
                                    return false;
                                }
                            </script>
	                    </asp:PlaceHolder>
	                    <asp:PlaceHolder runat="server" ID="Saved" Visible="false">
	                        <div style="padding: 10px; font-weight: bold;">Page Saved</div>
	                        <asp:Label runat="server" id="error" ForeColor="Red" />
	                    </asp:PlaceHolder>
	                </div>
                </div>
                <div id="ControlPanelFooter" style="text-align: right;">
                    <CP:ResourceButton runat="server" ID="SaveButton" OnClientClick="return setfield();" ResourceName="Save" Visible="false" />
                    <CP:ResourceButton runat="server" ID="CancelButton" ResourceName="Cancel" Visible="false" />
                    <cp:resourcebutton id="CloseButton" runat="server" resourcename="Close" OnClientClick="return closeEditor();" />
                </div>
            </div></div>
    </form>
</body>
</html>
